<template>
  <ElTableColumn v-if="columnProps.visible" v-bind="columnProps.tableColumn">
    <template #header="scope">
      <template
        v-if="
          `${columnProps.tableColumn.prop}Header` in tableColumnSlots ||
          columnProps[`${columnProps.tableColumn.prop}Header`]
        "
      >
        <component
          :is="
            tableColumnSlots[`${columnProps.tableColumn.prop}Header`] ||
            columnProps[`${columnProps.tableColumn.prop}Header`](scope)
          "
          v-bind="scope"
        ></component>
      </template>
      <slot
        v-else
        :name="`${columnProps.tableColumn.prop}Header`"
        v-bind="scope"
      >
        <span>
          {{ columnProps.tableColumn.label || columnProps.tableColumn.prop }}
        </span>
      </slot>
    </template>
    <template #default="scope">
      <template v-if="columnProps.children && columnProps.children.length">
        <TableColumn
          v-for="(item, index) in columnProps.children"
          :columnProps="item"
          :tableColumnSlots="tableColumnSlots"
          :key="index"
        />
      </template>
      <template v-else>
        <template
          v-if="
            columnProps.tableColumn.prop in tableColumnSlots ||
            columnProps.render
          "
        >
          <component
            :is="
              tableColumnSlots[columnProps.tableColumn.prop] ||
              columnProps.render(scope)
            "
            v-bind="scope"
          ></component>
        </template>
        <slot v-else :name="columnProps.tableColumn.prop" v-bind="scope">
          <ElTag
            v-if="columnProps.tag"
            :type="getTagColor(scope.row[columnProps.tableColumn.prop])"
          >
            {{ scope.row[columnProps.tableColumn.prop] }}
          </ElTag>
          <!-- 还原 ElementPlus formatter 功能 -->
          <component
            v-else-if="columnProps.tableColumn.formatter"
            :is="
              () =>
                columnProps.tableColumn.formatter(
                  scope.row,
                  scope.column,
                  scope.$index
                )
            "
          ></component>
          <span v-else>
            {{ scope.row[columnProps.tableColumn.prop] }}
          </span>
        </slot>
      </template>
    </template>
    <template #filter-icon="scope">
      <template
        v-if="
          `${columnProps.tableColumn.prop}FilterIcon` in tableColumnSlots ||
          columnProps[`${columnProps.tableColumn.prop}FilterIcon`]
        "
      >
        <component
          :is="
            tableColumnSlots[`${columnProps.tableColumn.prop}FilterIcon`] ||
            columnProps[`${columnProps.tableColumn.prop}FilterIcon`](scope)
          "
          v-bind="scope"
        ></component>
      </template>
      <slot
        v-else
        :name="tableColumnSlots[`${columnProps.tableColumn.prop}FilterIcon`]"
        v-bind="scope"
      >
      </slot>
    </template>
  </ElTableColumn>
</template>

<script setup>
defineOptions({
  name: "TableColumn",
});
const tagTypes = ["primary", "success", "info", "warning", "danger"];
const props = defineProps({
  columnProps: {
    type: Object,
    default: () => ({}),
  },
  tableColumnSlots: {
    type: Object,
    default: () => ({}),
  },
});

function getTagColor(value) {
  const sum = value
    ? value
        .toString()
        .split("")
        .map((v) => v.charCodeAt(0))
        .reduce((a, b) => a + b, 0)
    : 0;
  const index = sum ? sum % tagTypes.length : 0;
  return tagTypes[index];
}
</script>

<style scoped></style>
